<template>
	<view class="container">
		<cu-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content" class="page-name">手机</block>
		</cu-header>
		<view class="contents">
			<cu-tabbar :datas="tabs" @onchange="onSwitchTab"></cu-tabbar>
			<view >
				<cu-swiper></cu-swiper>
				<view class="padding-left-sm padding-right-sm">
					
					<view class="cu-card radius bg-white margin-top-sm ">
						<cu-title title="排行榜" hint="闭眼跟榜买" modal="3" ></cu-title>
						<view class="padding-lr">
							<cu-grid-media cols="3" :datas="goods" @onchange="onSelectItem"></cu-grid-media>
						</view>
						
					</view>
					<view class="cu-card radius bg-white margin-top-sm ">
						<cu-title title="精选商品" hint="每日为你精选" modal="3" ></cu-title>
						<view class="padding-lr">
							<cu-grid-media cols="2" :datas="goods" @onchange="onSelectItem"></cu-grid-media>
						</view>
						
					</view>
				</view>
			</view>
			
			<view style="height: 100rpx;margin-top: 1rem;"></view>
		</view> 
		<view class="fixed foot">
			<view class="cu-bar tabbar  bg-white">
				<view class="action text-orange">
					<view class="cuIcon-homefill"></view> 手机专场
				</view>
				<view class="action text-gray">
					<view class="cuIcon-similar"></view> 手机配件
				</view>
				<view class="action text-gray">
					<view class="cuIcon-recharge"></view>
					精选店铺
				</view>
				<view class="action text-gray">
					<view class="cuIcon-cart">
						<view class="cu-tag badge">99</view>
					</view>
					手机网厅
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuTitle from '@/components/diy/content/cu-title.vue';
	import cuTabbar from '@/components/diy/header/cu-tabbar.vue';
	//footer
	import cuNavbar from '@/components/diy/footer/cu-navbar.vue';
	//轮播
	import cuSwiper from '@/components/diy/content/cu-swiper.vue';
	//list     
	import cuGrid from '@/components/diy/list/cu-grid.vue';
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userinfo'])
		},
		components: {
			cuNavbar,
			cuTabbar,
			cuSwiper,
			cuGrid,
			cuTitle,
			cuGridMedia
		},
		data() {
			return {
				current:0,
				tabs:this.$mock.classflys,
				goods:this.$mock.goods,
				classflys:[
					{
					
							name: '小米',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: 'vivo',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: 'oppo',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: '华为',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: 'iphone',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: '一加',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: '充电配件',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: '耳机',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: '移动电源',
							color: 'red',
							cuIcon: 'btn'
						},
						{
					
							name: '二手数码',
							color: 'red',
							cuIcon: 'btn'
						}
				]
			}
		},
		methods: {
			onSwitchTab: function(e) {
				this.current=e;
				console.log(e)
			},
			onSelectItem:function(e){
				
				if(this.current==0){
					let good=this.goods[e];
					this.$util.redirectTo('/pages/shop/child/goodsdetail',{title:good.name})
				}else{
					this.$util.showAlert("没有商品详情")
				}
				console.log(e)
			}
		}
	}
</script>

<style scoped>

</style>
